<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时工具</title>
    <script type="text/javascript">
        const fruits = new Map();
        const counter = new Map();

        function resetTimer(timerid) {
          clearInterval(fruits.get(timerid));
          fruits.delete(timerid);
          counter.delete(timerid);
          document.getElementById(timerid).value='0秒';
        }

        function startTimer(timerid) {
          var tmp;
          tmp=0;
          if (fruits.has(timerid)) {
            return;
          }
          if (!counter.has(timerid)) {
            counter.set(timerid, tmp);
          }
          fruits.set(timerid, setInterval(timerparam, 1000, timerid));
        }

        function second2h(seconds) {
          var ret = "";
          var min = parseInt(seconds/60);
          var sec = seconds%60;
          if (min > 0) {
            ret = min + "分";
          }
          ret += sec + "秒";
          return ret;
        }

        function stopTimer(timerid) {
          clearInterval(fruits.get(timerid));
          fruits.delete(timerid);
          document.getElementById(timerid).value=second2h(counter.get(timerid));
        }

        function timerparam(timerid) {
          var tm = counter.get(timerid);
          tm++;
          counter.set(timerid, tm);
          document.getElementById(timerid).value=second2h(counter.get(timerid));
        }
    </script>

    <style>
       table,table tr th, table tr td {
        border:1px solid #ccc;
         }
       table{
        width: 500px;
        border-collapse: collapse;
    }
    </style>
</head>
<body>
  <p>反作弊周会项目计时工具<span id="clock"></span></p>
  <hr>
  <br>
  <table border="1" cellpadding="0";cellspacing="0">
    <tr>
        <td width="150px">项目名称</td> 
        <td width="30px">耗时</td> 
        <td>控制</td> 
    </tr>
    <script type="text/javascript">
        var arr = ["条目一",
                   "条目二"
                  ];
        for (var i = 0; i < arr.length; i++) {
          document.write("<tr> <td width=\"150px\">" + arr[i] + "</td>"
            + "<td width='90px'> <input width=\"30px\" type=\"test\" id=\"projectid" + i + "\" value=\"0秒\"> </td>"
            + "<td>");
            //  <button type="button" onclick=startTimer('id' + i)>开始</button>
          document.write("  <button type=\"button\" onclick=\"startTimer('projectid" + i +"')\">开始</button>"
            + "  <button type=\"button\" onclick=stopTimer('projectid" + i +"')>暂停</button>"
            + "  <button type=\"button\" onclick=resetTimer('projectid" + i +"')>重置</button>");
            document.write("</td> </tr>");
        }
        /*
        */
    </script>
  </table>

  <br>
  <hr>
</body>
</html>
